<template>
  <div class="page-selector">
    <div class="selector-container">
      <button 
        @click="selectPage('article')" 
        class="page-btn"
        :class="{ active: currentPage === 'article' }"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
          <polyline points="14,2 14,8 20,8"></polyline>
          <line x1="16" y1="13" x2="8" y2="13"></line>
          <line x1="16" y1="17" x2="8" y2="17"></line>
          <polyline points="10,9 9,9 8,9"></polyline>
        </svg>
        文章生成
      </button>
      <button 
        @click="selectPage('trending')" 
        class="page-btn"
        :class="{ active: currentPage === 'trending' }"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
        </svg>
        智能选题
      </button>
      <button 
        @click="selectPage('comment')" 
        class="page-btn"
        :class="{ active: currentPage === 'comment' }"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
        智能评论
      </button>
      <button 
        @click="selectPage('topic')" 
        class="page-btn"
        :class="{ active: currentPage === 'topic' }"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 12l2 2 4-4"></path>
          <path d="M21 12c-1 0-2-1-2-2s1-2 2-2 2 1 2 2-1 2-2 2z"></path>
          <path d="M3 12c1 0 2-1 2-2s-1-2-2-2-2 1-2 2 1 2 2 2z"></path>
          <path d="M12 3c0 1-1 2-2 2s-2-1-2-2 1-2 2-2 2 1 2 2z"></path>
          <path d="M12 21c0-1 1-2 2-2s2 1 2 2-1 2-2 2-2-1-2-2z"></path>
        </svg>
        话题文章
      </button>
      <button 
        @click="selectPage('pyq')" 
        class="page-btn"
        :class="{ active: currentPage === 'pyq' }"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
        </svg>
        朋友圈
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  currentPage: {
    type: String,
    default: 'article'
  }
});

const currentPage = ref(props.currentPage);

const selectPage = (page) => {
  currentPage.value = page;
  // 触发自定义事件，通知父组件页面切换
  emit('page-change', page);
};

const emit = defineEmits(['page-change']);

// 监听props变化
watch(() => props.currentPage, (newPage) => {
  currentPage.value = newPage;
});
</script>

<style scoped>
.page-selector {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 0;
  border-bottom: 1px solid #dee2e6;
}

.selector-container {
  display: flex;
  gap: 15px;
  padding: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f8f9fa;
  color: #6c757d;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.page-btn:hover {
  background: #e9ecef;
  color: #495057;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.page-btn.active {
  background: linear-gradient(135deg, #fdd835 0%, #f9a825 100%);
  color: #2c3e50;
  border-color: #f9a825;
  box-shadow: 0 4px 16px rgba(253, 216, 53, 0.3);
}

.page-btn svg {
  transition: transform 0.3s ease;
}

.page-btn:hover svg {
  transform: scale(1.1);
}

.page-btn.active svg {
  transform: scale(1.1);
}
</style> 